<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑产品</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__CSS__/animate.min.css" rel="stylesheet">
    <link href="__CSS__/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="__JS__/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
    <link href="__JS__/layui/css/layui.css"rel="stylesheet">

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins col-sm-10">
        <style>
            .layui-tab{background:#fff;margin:0;padding:10px 20px;}
            .ibox-content{border-width:0px;padding-top:0px;}
            .layui-this{position:relative;top:-1px;}
            #sm{margin-top:30px;}
            #sm span{position: relative;display: inline-block;margin-right:10px;}
            #sm span i{position: absolute;right:-8px;top:-8px;font-size:22px;}
        </style>
        <form class="form-horizontal m-t" id="commentForm" method="post" action="{:url('loan/edit')}">
            <input type="hidden" name="id" value="{$data.id}" />
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">产品信息</li>
                <li>活动规则</li>
                <li>产品优势</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">产品名称：</label>
                        <div class="input-group col-sm-7">
                            <input id="name" type="text" class="form-control" name="name" value="{$data.name}" required="" aria-required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">可贷额度：</label>
                        <div class="input-group col-sm-7">
                            <input id="credit_line" type="text" class="form-control" name="credit_line" value="{$data.credit_line}" required="" aria-required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">借款期限：</label>
                        <div class="input-group col-sm-7">
                            <input id="desc" type="text" class="form-control" name="desc" value="{$data.desc}" required="" aria-required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">奖金：</label>
                        <div class="input-group col-sm-7">
                            <input id="bonus" type="text" class="form-control" name="bonus" value="{$data.bonus}" required="" aria-required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">费率：</label>
                        <div class="input-group col-sm-7">
                            <div class="control-label col-sm-5">
                                <input class="form-control" id="spend" type="text" placeholder="0" name="spend" value="{$data.spend}"  required="" aria-required="true">
                            </div>
                            <div class="control-label col-sm-5">
                                <input class="form-control" id="unit" type="text" placeholder="元/天"  name="unit" value="{$data.unit}"  required="" aria-required="true">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">链接地址：</label>
                        <div class="input-group col-sm-7">
                            <input id="link" type="text" class="form-control" name="link" required="" value="{$data.link}" aria-required="true" placeholder="http://www.万汇金服.com">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">产品封面图：</label>
                        <input name="thumb" id="thumb" type="hidden" value="{$data.thumb}"/>
                        <div class="form-inline">
                            <div class="input-group col-sm-2">
                                <button type="button" class="layui-btn" id="test1">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </div>
                            <div class="input-group col-sm-3">
                                <div id="sm">
                                    <img src="{$data.thumb}" style="width:40px;height: 40px;"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">排序：</label>
                        <div class="input-group col-sm-7">
                            <input id="list_order" type="text" class="form-control" name="list_order" value="{$data.list_order}" required="" aria-required="true">
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="form-group">
                        <label class="col-sm-11 control-label">活动规则</label>
                        <label class="col-sm-1 control-label"><button type="button" class="btn btn-primary" onclick="return addRule()">添加</button></label>
                    </div>
                    <div id="rule-input">
                        {volist name="data.rule" id="vo"}
                        <div class="form-group">
                            <div class="control-label col-sm-11">
                                <input type="text" class="form-control rule" name="rule[]"  value="{$vo}">
                            </div>
                            <div class="control-label col-sm-1">
                                <button type="button" class="btn btn-default" onclick="return revRule(this)">移除</button>
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">优势标签</label>
                        <label class="col-sm-7 control-label">优势描述</label>
                        <label class="col-sm-1 control-label"><button type="button" class="btn btn-primary" onclick="return addAdvantage()">添加</button></label>
                    </div>
                    <div id="advantage-input">
                        {volist name="data.advantage" id="vo" key="k" }
                        <div class="form-group" data-id="{$k}">
                            <div class="control-label col-sm-4">
                                <input type="text" class="form-control tag" name="advantage[{$k}][tag]"  value="{$vo.tag}">
                            </div>
                            <div class="control-label col-sm-7">
                                <input type="text" class="form-control advantage" name="advantage[{$k}][desc]"  value="{$vo.desc}">
                            </div>
                            <div class="control-label col-sm-1">
                                <button type="button" class="btn btn-default" onclick="return revAdvantage(this)">移除</button>
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12 col-sm-offset-6">
                    <!--<input type="button" value="提交" class="btn btn-primary" id="postform"/>-->
                    <button class="btn btn-primary" type="submit">确认提交</button>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>
<script src="__JS__/jquery.min.js?v=2.1.4"></script>
<script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
<script src="__JS__/content.min.js?v=1.0.0"></script>
<script src="__JS__/plugins/validate/jquery.validate.min.js"></script>
<script src="__JS__/plugins/validate/messages_zh.min.js"></script>
<script src="__JS__/plugins/iCheck/icheck.min.js"></script>
<script src="__JS__/plugins/layer/layer.min.js"></script>
<script src="__JS__/plugins/ueditor/ueditor.config.js"></script>
<script src="__JS__/plugins/ueditor/ueditor.all.js"></script>
<script src="__JS__/jquery.form.js"></script>
<script src="__JS__/layui/layui.all.js"></script>
<script type="text/javascript">
    function addAdvantage() {
        var i=0;
        if($("#advantage-input .form-group").length>0){
            i=1+parseInt($("#advantage-input .form-group:last").attr("data-id"));
        }
        var html='<div class="form-group" data-id="'+i+'">'+
            '<div class="control-label col-sm-4">'+
            '<input type="text" class="form-control tag" name="advantage['+i+'][tag]"  value="">'+
            '</div>'+
            '<div class="control-label col-sm-7">'+
            '<input type="text" class="form-control advantage" name="advantage['+i+'][desc]"  value="">'+
            '</div>'+
            '<div class="control-label col-sm-1">'+
            '<button type="button" class="btn btn-default" onclick="return revAdvantage(this)">移除</button>'+
            '</div>'+
            '</div>';
        $("#advantage-input").append(html);
    }
    function revAdvantage(_this) {
        var _this=$(_this).parents('.form-group');
        if(_this.find('.tag').val()!='' || _this.find('.advantage').val()!=''){
            if(confirm('此项填写有内容,确定删除？')){
                _this.detach();
            }else{
                return false;
            }
        }
        _this.detach();
        return false;
    }

    function addRule() {
        var html='<div class="form-group">'+
            '<div class="control-label col-sm-11">'+
            '<input type="text" class="form-control rule" name="rule[]"  value="">'+
            '</div>'+
            '<div class="control-label col-sm-1">'+
            '<button type="button" class="btn btn-default" onclick="return revRule(this)">移除</button>'+
            '</div>'+
            '</div>';
        $("#rule-input").append(html);
    }
    function revRule(_this) {
        var _this=$(_this).parents('.form-group');
        if(_this.find('.rule').val()!=''){
            if(confirm('此项填写有内容,确定删除？')){
                _this.detach();
            }else{
                return false;
            }
        }
        _this.detach();
        return false;
    }

    layui.use('element', function(){
        var element = layui.element;
    });
    var index = '';
    function showStart(){
        index = layer.load(0, {shade: false});
        return true;
    }

    function showSuccess(res){

        layer.ready(function(){
            layer.close(index);
            if(1 == res.code){
                layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    window.location.href = res.data;
                });
            }else if(111 == res.code){
                window.location.reload();
            }else{
                layer.msg(res.msg, {anim: 6});
            }
        });
    }


    $(document).ready(function(){

        //$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});

        // 添加角色
        var options = {
            beforeSubmit:showStart,
            success:showSuccess
        };
        var editor = UE.getEditor('container');
        $('#commentForm').submit(function(){
            $(this).ajaxSubmit(options);
            return false;
        });

        $(".bootstrap-tagsinput").addClass('col-sm-12').find('input').addClass('form-control')
            .attr('placeholder', '输入后按enter');
        // 上传图片
        layui.use('upload', function(){
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: "{:url('loan/uploadImg')}" //上传接口
                ,done: function(res){
                    //上传完毕回调
                    $("#thumb").val(res.data.src);
                    $("#sm").html('<img src="' + res.data.src + '" style="width:40px;height: 40px;"/>');
                }
                ,error: function(){
                    //请求异常回调
                }
            });
        });

    });
    function delImage(_this,index) {
        $("[data-index='"+index+"']").detach();
        $(_this).parent('span').detach();
    }
    // 表单验证
    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
        },
        success: function(e) {
            e.closest(".form-group").removeClass("has-error").addClass("has-success")
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    });
</script>
</body>
</html>
